<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>


<div class="grid-content bg-purple-light" style="border-radius: 4px; min-height: 36px; background: papayawhip;">
    <el-card shadow="hover">
        <div id="ipage-chart-send" ref="send" style="height: 342px;"></div>
    </el-card>
</div>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('ipage-chart-send'));

    var colors = ['#5470C6', '#EE6666'];

    // 指定图表的配置项和数据
    var option = {
        color: colors,

        tooltip: {
            trigger: 'none',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data: ['2023 收入', '2023 支出']
        },
        grid: {
            top: 70,
            bottom: 50
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '支出  ' + params.value +
                            (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            data: ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10',
                '2023-11', '2023-12'
            ]
        },
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    onZero: false,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisPointer: {
                    label: {
                        formatter: function (params) {
                            return '收入  ' + params.value +
                                (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                        }
                    }
                },
                data: ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10',
                    '2023-11', '2023-12'
                ]
            }
        ],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '2023 收入',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
                focus: 'series'
            },
            data: [11000, 11070.9, 11009.0, 13000.4, 14028.7, 15070.7, 16175.6, 16182.2, 17048.7, 18000.8, 19006.0, 0]
        },
            {
                name: '2023 支出',
                type: 'line',
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                data: [1000, 1070.9, 1009.0, 3000.4, 4028.7, 5070.7, 6175.6, 6182.2, 7048.7, 8000.8, 9006.0, 0]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

